Buat 2 lingkaran warna nanti bisa didrag bisa berubah warna sesuai dgn kita drag 
Buta project 

Stf 

Buat body2 column 

Karena bagian atas buat 2 lingkaran bawah untuk drag 

Buat 2 lingkaran yg sama gunakan row 

Sizedbox untuk jarak yg punya height dan widht 

Child kasih material 


18,FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


createState() => 


context) { 


("Latihan Dragable"),), 


height: 


03:21 CD 17:42 
I m D SISIA mei 
18.FLUTTER 15, Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player = x 

Media Playback Audio Video Subtitle Tools View Help 


createState() => 


28 © 
build( context) { 
return ( 


home: ( 


Latihan Dragable 


appBar: (title: 
body: ( 
children: < >[ 
( 
children: < [ 
(width: 50, height: 50, child: (color: 


U/skia : Program Linki 


I/chatty (15 : uid=10085(com ntoh dragable) 1.gpu identical 9 
ogram linking fail 
: Pr am linki failed. 
ui (com.example.contoh dragable) 1.gpu identical 5 Drs 


Program linking failed. 


03:30 


Ih rela lal IR Sisi mp” | 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools 


View 


Help 


createState() => 


build( context) 
returr 
home: 
appBar: (title: 
body ( 
mainAxisAlignment: 
children: < >[ 
( 
mainAxisAlignment: 
children: < >[ 
(width: 


L 


tupuatatali MECHSE, 
ndroid.phon(15984): runtime.cc:566 
java:3259) 
/m.android.phon(15984): runtime.cc:566) 
F/m.android.phon(15984): runtime.cc:566] 


Reloaded 1 of 440 libraries in 1,4 


04:10 
|] ee mp DI 


o 


an Dragable 


.spaceAround, 


.spaceAround, 


height: child: 


at android.hardware.rad 


Jika kasih widget baruy maka dia akan menyesuaikan jarak nya 


Buat likaran 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools 


View 


Help 


createState() 


build( context) 
turr 
nome: 
appBar: (title: 
body: ( 
mainAxisAlignment 
children: < >[ 
( 
mainAxisAlignment: 
children: < >[ 
(width: 


1, 


» 
k/m.anaro1a.phon( 16548): runtime.c 
ardwareConfig.java:8 
F/m.android.phon(16548): runtime 
Response. java:4620) 
F/m.android.phon(16548): runtime.c 


F/m.android.phon(16548): runtime. 


04:37 
|] Ke DI 


.spaceAround, 


.spaceAround, 


>ð, child: (color: 


at android.naraware.radilo.Vi_@.HardwareContig.readavectortromrarcel(H 


Radio 


x 


at android.hardware.radio.V1 2. IRadioResponsefStub.onTransact( IRadio 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — K 


Media Playback Audio Video Subtitle Tools View Help 


+ maran createState( ) 


o 
build( 


turr 


Latihan Dragable 


nome: 
appBar: "Latihan Dragable 
body: 

mainAxisAlignment .spaceAround, 

children: < >[ 
( 
mainAxisAlignment: .spaceAround, 
children: < >[ 

(width: : 50, child: 


Waitrorsignai(art::inreaa* 1 1SIgnalset&)t26D) 
F/m.android.phon(16606) .cc:558J : #04 pc 004f9b20 
Run(void* )+320) 
F/m.android.phon(16606) : 2.cc:55 native: #05 pc 0008f065 
453) 
g Babon F/m.android.phon( 166 8 native: #06 pc 0002485b /system/lib/libc. 
a 


04:39 


|] rela oa Ct SIS TP | 
Stadiumborder bukan untuk lingkarn tapi ujung nya melengkung 
18,FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle 


Tools View Help 


> No Configurations * P 


+ man createState() => 


build( 
turr 
rome: 
appBar: (title: atihan Dragable"),), 
body: ( 
mainAxisAlignment : .spaceAround, 
children: « >[ 
( 
mainAxisAlignment: aceAround, 
children: 
(width: height: 50, child: (color: 


F/m.andro1d.phon( 160938): runtime.cc: J at android.naraware.radio.Vi_6.SetupvataLalikesuit.readtromParcel(se 
tupDataCallResult. java:113) 

F/m.android.phon(16938): runtime.c ] at android. hardware.radio.V1_2.IRadioResponse$Stub.onTransact(IRadio 
Response. java:3259) 

F/m.android.phon(16938): runtime.cc 


F/m.android.phon(16938): runtime.cc 


05:01 
WE) Ka Cate) (SIS 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


createState( ) 


build( 
turn 
rome: 
(title: 
body: ( 
mainAxisAlignment : 
childrer >[ 
( 
mainAxisAlignment: 


>[ 


appBar: 


children: < 


(width: 


F/m.android.phon( 16938): 


tupDataCallRe 


runtime.cc: 
ult. java:113) 


F/m.android.phon(169 


java:3259) 


Response 


F/m.android.phon(16938): runtime.cc: 
a waron 
38): runtime.cc: 


05:06 


4 


Ke DIN 


pai 


o 


Latihan Dragable 


Dragable 


) 


Around, 


.spaceAround, 


height: child: 


at androld.nardware.rad1o.Vi 6.3 ei(se 


at android.hardware.rad Radio 


566) 


566) 


Karena bentuk nya sama maka menjadi lingkaran 


Leveted akan ada sahdow 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


+ waman retu 
home: 
appBar: 


title: 


AxisAlignment: 
childre 
( 


width: 

height: 

child: 
color: 
shape: 


levation: 


ro1d.phon(1/40/): 
ult. java:113) 
87): 


t/m.ana 
tupDataCallRe 


F/m.android.phon(17 


runtime.c 


runtime 
Response. java: 3259) 
F/m.android.phon (17407): 


F/m.android.phon(17487): 


runtime.c 


runtime. 


05:44 


1] 
Data warna ganti satru buah variabel 
Buat 2 untuk lingkaran 2 


ra 
a 


Kai th 


.spaceAround, 


-SpaceAround, 


at androla.hardware.rad1o.V1 6.SetupUataLaiiKesuit.read-romparcei( se 


at android.hardware.radio.V1 IRadioResponse$Stub.onTransact(IRadio 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — K 


Media Playback Audio Video Subtitle Tools View Help 


package: flutter/material.dart'; 


main() => runApp( 


createState() 


colori = .redj 


color2 - -amber; 


build( 
retur 
home: 
appBar: 
title: 


uLt.JjJava: 113 
F/m.android.phon(17747): runtime 
ava:3259) 
F/m.android.phon(17747): runtime 
F/m.android.phon(17747): runtime. 


serong 
Reloaded 1 of 440 librarie 


06:18 
|] Ke DI 


Maka 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — K 


Media Playback Video Subtitle Tools View Help 


Audio 


)> 
body: ( 
mainAxisAlignment: .spaceAround, 
children: « >[ 
( 


mainAxisAlignment: .spaceAround, 


children: « >[ 


width: 
height: 56, 
child: ( 
color: colori, 
shape: 
evatio 


F/m.android.pnon( 26241): runtime.cc: || at andro1id.nardware.rad1io.V1 Y.SsetupuatataliKesult.readhromParcel 
tupDataCal1Result.java:113) 

F/m.android.phon(20241): runtime ] at android.hardware.radio.V1 2.IRadioResponse$Stub.onTransact(IRadio 
Response. java:3259) 

F/m.android.phon(20241): runtime.c 


.android.phon(20241): runtime. 


06:29 
Ih Ka Cote) SIS 


Lingkaran bisa drag maka bungkus dgn draggeble 
Butuh tipe data yg perlu dibawah maka color properti data=color 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — K 


Media Playback Audio Video Subtitle Tools View Help 


children: < >[ 
( 
mainAxisAlignment: .spaceAround, 
children: « >[ 
< > ( 


data: colorl, 


height: 

child: 
color: colori, 
shape: 


elevation: 3, 


» 


F/m.anaroid. pho runtime.cc:560j at android.naraware.radio.Vi_#.SetupVataLalikesuit.readtromrarcei(se 

tupDataCal It.java:113) 

F/m.android.phon(22018): runtime 566) at android.hardware.radio.V1 2.IRadioRespo ub.onTransact (IRadio 
po ) 

F/m.android.phon(22018): runtime.c 


F/m.android.phon( ): runtime 


07:22 


IN Ke ala ox mp” 4 
Ada lagi childWhenDragging 
Widget setelah didrag maka diawal berubah seperti apa 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


widtn: 56, 
height: 56, 
child: ( 
color: colori, 
shape: 
elevation: 3, 
), 
childwhenDraggi 
width: 
height 
chil 
color: .black26, 
shape: ar 
elevation: 3 


` mG ce ZA x 
romParcei( SetupVatalalikesuit. java:143) = 
F/m.android.phon(22702): java_vm_ext.cc:542] at android.hardware.radio.V1 @.SetupDataCallResult.readFromParce 
1(SetupDataCal1Result. java:113 

ndroid.phon( java vm ext.cc:542 at android.hardware.radio.V1_2.IRadioResponse$Stub.onTransact(IR 


adioRespon: java:3259) 


F/m.android.phon(227@2): java_vm_ext.cc:542] 


T Ka Gm SER — a 
Ketika diangkat tempat aslinya menjadi warna abu2 
Lalu buat lagi feedback untuk lingkaran setalh drag 


Buat color tapi transparent 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


Width: 5 
height: 
child: 
color: .black26, 
shape: 0); 
coe 
Latihan Dragable 
feedback 
width: 
height: 
child: ( 
color: color1.withOpacity(@.5), 
shape: Q, 
elevation: 3 


: runtime.cc:»bb at andro1d.haraware.rad1o.V1 6. ei(H 


: runtime 6] at android. hardware.radio.V1_2. tadio 
: runtime.cc: 


F/m.android.phon(23906): runtime.c 


i KINI crit) Ssisix mg” | 
Ketika drag maka menjadi abu2 


Fedback menjadi merah transparent 
Abu jelek karna ada shadow 


> Noc 


< VARIABLES 


elevation: 3, 
), 
), 
childwWhenDr 
width: 
height: 56 "00 
child: Latihan Dragable 
color: 
shape: 
elevation: @ 
» 
» 
feedback: 
width: 50, 
height: 50, 
child: ( 
color: colorl.withOpacity(8.7), 
shape: (> 
elevation: 3, 
)s 


t/m. android. pnon( 25090) : runtime.cc: 566] at android.hardware.rad1o.Vl 6.S€ 
tupDataCallResult.java:113) 

F/m.android.phon( 25090): runtime.cc:566] at android.hardware.radio.V1 2.IR 
Response. java: 9) 

F/m.android.phon(25090): runtime.cc:566] 


F/m.android.phon(25696): runtime. 


8 


Maka lebih bagus 


Bikin lagi tempat drag nya 

Setelah row 

Dragtarget ada tipe datanya color didalm 

Onwillacdept berfungsi apakah data yg dibawah diterima untuk saat ini terima 


Oneacdept fungsi menerima data tersebut 
Untuk onaccept buat variabel untuk mengecek sudah diterma atau belum buat false 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


createState() => 


colori = 
colo 


isAccepted 


build( 
eturr 
home: 
appBar: 
title: 


.spaceAround, 


: runtime.cc:566) at androld.nardware.radlo.Vl 6.SetupUataLalikesuit.readrrombarcel( Se 
13) 


: runtime.cc:566] at android.hardware.radio.V1 2. IRadioRespon Stub.o 


d.phon(29836): runtime.cc:5| 


F/m.android.phon(29836): runtime.cc 


1 Aam Du ADE e a) 
Jika setelah diterima majadi true 

Buider memiliki 3 buah paramter context candidates rejected 

Misalkan sudah menerima warna maka akan saya gambar adalah 

Buat lingkaran menjadi besar 

Kita perlu warna target nya 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player - x 


Media Playback Audio Video Subtitle Tools View Help 


main() => runApp( O); 


createState() => 


build( context) { 


return 
home: 
appBar: 


tle Matit 


s mx cone = x 
.androld.phon( 32665): runtime.cc: | at anaro1a.nardware.rad1o.Vi 6.SetupVataLaLiKesuit.readrromParce.( se 
IResult.jav 13) 


: runti 66) at android.hardware.radio.V1 2. IRadioResponsefStub.onTransact( IRadio 


n. android. phon(32605): runtime.cc:566] 


.android.phon( 326: runtime.cc:566] 


14:13 


Kalau sudah terima tagertcolor diubah menjadi value 


Color nya menjadi target color 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 
Playback Audio Video Subtitle 


Media Tools View Help 


> No Configurations * 


< >( 
onWillAccept: (value) 
onAccept: (value) {isAc ; targetColor = value;}, 
builder: (context, candidates, rejected) 
(isAccepted) ? 
width: 106, 
height: 100, 
child: ( 
color: targetColor, 
shape: 
elevation: 


IP 


t/m.anaro1a.phon( 32/54): runtime.cc:bbbj at anarord.naraware.ra Vi 6.SetupVataLaLiKesuit.readrromparce.( se 
tupDataCal1Result.java:113) 

F/m.android.phon(32754): runtime.cc:566) at android.hardware.radio.V1 2. IRadioResponsefStub.onTransact( IRadio 
Response. java: 3259) 

F/m.android.phon(32754): runtime. 


F/m.android.phon(32754): runtime. 


14:46 
|] ka mua at 


Lalu masih isAccept masih false maka akan tampil menjadi abu 
Pasang return juga 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle 


Tools View Help 


onaccept: (vaiue) {1sAcceptea = tTLosor = vaiue;}, 
builder: (context, candidate 
n (isAccepted) ? 
width: 100, 
height: 16 
ild: ( 
color: targetColor, 
shape: 0); 
elevation: 3, 


noe 


Latihan Dragable 


width: 109, 

height: 100, 

child: 
color: 
shape: 


evation: 3 


+/m.android.phon( 32/54): runtime.cc:566j at androla.nardware.rad1o.V1 2. 


Response. java: 3259) 


F/m.android.phon(32754): runtime 
F/m.android.phon(32754): runtime.cc: 
Reloaded 1 of 44@ libraries in 


Reloaded 1 of 440 libraries in 


15:29 


Ih ka mt) Di SITA mp” d 


Bayangnya hilangkan 


A 18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


> No Config 


a wa Onaccept: (vaiue) {1sAcceptea targetkoLor = vaiue;}, 
builder text, candidate 
(isAccepted) ? 
width: 100, 
height: 160, 
child: ( 
color: targetColor, 


shape: i 


width: 
height: 
child: 
olor: .black26, 


shape: 3 Os 


Kesponse. Java 
F/m.android.phon(32754): runtime. 
F/m.android.phon(32754): runtim 
Reloaded 1 of 440 libraries in 263ms 
Reloaded 1 of 448 braries in 319m 


Reloaded 1 of 440 braries in 338ms. 


15:54 17:42 


Ih KI [EHH SIS mp” ) 
Jika didrag dilepas menjadi merah 
Tambahakan lingkaran 2 


A 18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


color: Colors.grey, 
shape: StadiumBorder(), 
elevation: 0, 
» 
» 
feedback: SizedBox( 
width: 56, 
height: 50, 
child: Material( 
color: colori.withOpacity(0.7), 
shape: StadiumBorder(), 
elevation: 3, 


» 


onWillAccept: ( 
pt: (value) {i cepted - true, tar 


builder:..(context,..candidates,..rejected)..f 


2754): runtime.cc:56 

2754): runtime 
Reloaded 1 of 440 braries in 2 
Reloaded 1 of 440 libraries in 3 


Reloaded 1 of 440 libraries in 338ms. 


3 
16:21 17:42 
HN Ke Cait 5 


Menjadi color2 


18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — K 


Media Playback Audio Video Subtitle Tools View Help 


color: colorl.withOpacity(@.7), 
shape: 0); 
elevation: 


height: 

child: 
color: color2, 
shape: 
elevation: 3, 


)s 
childwWhenDragging 
width: 50, 


50, 


Kesponse. Java 
F/m. android .phon (32754): 
F/m.android.phon(32754): runtim 
Reloaded 1 of 440 libraries in 263ms. 
Reloaded 1 of 440 libraries in 319ms. 


Reloaded 1 of 44 libraries in 338ms. 


16:34 
IN reda Cin 


Maka ubah juga ketika geser juga harus colors2 


18,FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player — K 
Playback Audio Video Subtitle 


Media Tools View Help 


> No Configurations * P 
— width: 
height 
child: 
color: 
shape: 


elevation: 


back: 

width: 

height: 

child: 
color: color2.withOpacity(9.7), 
shape: O5 


elevation: 


F/m.android.phon( 32/54): runtime.cc:bbb) 
Reloaded 1 of 440 librari 263ms. 
Reloaded 440 libraries 319ms. 
Reloaded f 440 libraries 338ms. 
Reloaded f 440 librarie 

Reloaded f 440 libraries 


16:56 
I ka mm ih SIS 


Coba ketika drag 


A 18.FLUTTER 15. Draggable, DragTarget, SizedBox, Material.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


width: 
height: 


“08 


Latihan Dragable 


feedback: 
width: 56 
height: 56, 
ild: 
color: color2. 
shape 


elevation: 3 


F/m.anarozd.pnon( 3 
Reloaded 1 of 440 
Reloaded f 440 libraries 
Reloaded 1 of 440 librarie 
Reloaded 1 of 440 libraries 


Reloaded of 440 libraries 


17:03 
|] ee mp DI 


